<template>
	<view class="customer-service my-customer-service my-customer-service-index">
		<view class="service-list flex-row-around" v-for="item in list" :key="item.id">
			<view class="left flex-column-around">
				<view class="name">
					{{item.name}}
				</view>
				<view class="phone">
					{{item.phone}}
				</view>
			</view>
			<view class="right">
				<view class="icon position-center" @click="call(item.phone)">
					<uni-icons type="phone" size="30"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: 1,
					phone: '110',
					name: "中国警察"
				},{
					id: 2,
					phone: '120',
					name: "中国医生"
				}],
				currentTime: 0, // 当前播放的时长
			}
		},
		methods: {
			// 拨打电话
			call(phoneCode) {
				uni.makePhoneCall({
					phoneNumber: phoneCode,
					success() {
						
					},
					fail() {
						uni.showToast({
							title: '拨打失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
.service-list {
	width: 700rpx;
	height: 50px;
	margin: 10px auto;
	border-radius: 10px;
	background-color: #eee;
	.left {
		width: 600rpx;
		height: 100%;
		box-sizing: border-box;
		padding-left: 10px;
		align-items: flex-start;
		.name {
			color: #aaa;
		}
		.phone {
			font-weight: bold;
		}
	}
	.right {
		width: 80rpx;
		height: 100%;
		position: relative;
	}
}
</style>
